<template>
  <div>
    <!-- <h3 align="center">新闻列表页面</h3> -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
        <router-link :to="'/home/newsInfo/'+item.id">
          <img class="mui-media-object mui-pull-left" :src="item.img_url">
          <div class="mui-media-body">
            {{item.title}}
            <p class='mui-ellipsis'>
              <span>发表时间：{{item.add_time | dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
              <span>点击次数：{{item.click}}</span>
            </p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { METHODS } from 'http';
export default {
  data () {
    return {
      newsList: [{ "id": "1", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "2", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "3", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "4", "title": "汽车之家", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/car1.jpg" },
      { "id": "5", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "6", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "7", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "8", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "9", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "10", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "11", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" },
      { "id": "12", "title": "联合国大会", "add_time": "2017-12-13 12:13:24", "click": "24", "img_url": "../../src/images/shuijiao.jpg" }]
    };
  },
  created () {

  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
li {
  .mui-ellipsis {
    font-size: 12px;
    color: #19aaff;
    display: flex;
    justify-content: space-between;
  }
}
</style>

